<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>直播跟单</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="./jq.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.1/skins/default/aliplayer-min.css" />
		<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/de/prismplayer/2.9.1/aliplayer-min.js"></script>
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				text-decoration: none;
				color: #333;
			}

			nav {
				display: flex;
				-webkit-display: flex;
				flex-direction: row;
			}

			nav a {
				flex: 1;
				text-align: center;
				line-height: 40px;

			}

			nav a.active span {
				color: #007aff;
				border-bottom: 2px solid #007aff;
			}

			header img {
				width: 65px;
				height: 65px;
				border-radius: 50%;
				float: left;
				margin-right: 15px;
				margin-top: 0px;
			}

			header {
				padding: 15px 25px;
				border-bottom: 1px solid #f1f1f1;
			}

			header div {}

			header div h5 {
				font-size: 15px;
				margin-bottom: 6px;
				margin-top: 2px;
			}

			header div p {
				font-size: 14px;
				color: #999;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.gao {
				font-size: 13px;
				padding: 15px;
				color: #999;
				border-bottom: 20px solid #f1f1f1;
			}

			.gao h5 {
				font-size: 14px;
				color: #333;
			}

			.histivy>h5 {
				line-height: 40px;
				padding-left: 15px;
				font-size: 15px;
			}
			.histivy li{
				border-top: 1px solid #f1f1f1;
				padding:15px;
				overflow: hidden;	
			}
			.histivy li a img {
				width: 43%;
				float: left;
				max-height: 100px;
			}

			.histivy li a>div {
				float: right;
				width: calc(57% - 20px);
			}

			.histivy li a>div h5 {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				font-size: 15px;
				margin-bottom: 5px;
			}

			.histivy li a>div p {
				display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
					font-size: 13px;
					line-height:18px;
					color: #999;
					min-height: 55px;
			}

			.histivy li a>div span {font-size: 12px;color: #999;}
			.box{
				overflow: auto;
			}
			.title{
				height: 180px;
				width: 100%;
				line-height: 180px;
				color: #000;
				font-size: 16px;
				text-align: center;
				position: fixed;top: 0;left: 0;
				background: url(title.png) no-repeat center center;
				background-size: cover;
			}
		</style>
	</head>
	<body>
		<div class="prism-player" id="player-con"></div>
		<div class="title">
			<!-- 不在直播中，看看往期回顾吧 -->
		</div>
		<nav>
			<a href="javascript:;" class="active"><span>直播</span></a>
			<a href="javascript:;"><span>提问</span></a>
		</nav>
		<div class="box">
			<header>
				<img src="./tjlog.png" alt="">
				<div>
					<h5>SDKLSDL daKSDD</h5>
					<p>
						jahdkjahkdaslda;卡里的卡死了大卡司溜达溜达善良的法兰克打卢克的卡里的卡死了大卡司溜达溜达善良的法兰克打卢克的卡里的卡死了大卡司溜达溜达善良的法兰克打卢克的
					</p>
				</div>
			</header>
			<div class="gao">
				<h5>公告：提问的问题如果没有回答，可以留下联系方式。</h5>
				<p>广播电视节目制作经营许可证编号：（粤）字第03306号</p>
			</div>
			<div class="histivy">
				<h5>历史回放</h5>
				<ul>
					<li>
						<a href="./index.html">
							<img src="tjlog.png">
							<div>
								<h5>标题</h5>
								<p>
									描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
								</p>
								<span>
									2020-12-12 12:12:12
								</span>
							</div>
						</a>
					</li>
					
				</ul>
			</div>
		</div>
		<div class="box" style="line-height: 300px;text-align: center;">
			暂未开放
		</div>
	</body>
	<script type="text/javascript">
		var heig = $(window).height() - 220;
		$('.box').height(heig);
		$('nav a').click(function(){
			var idx = $(this).index();
			$('.box').hide();
			$('.box').eq(idx).show();
		})
		$('nav a').eq(0).click();
		var player = new Aliplayer({
			"id": "player-con",
			"source": "https://live.afashe.com/glsq/glsqlive.m3u8",
			"width": "100%",
			"height": "180px",
			"autoplay": true,
			"isLive": true,
			"rePlay": false,
			"playsinline": true,
			"preload": true,
			"controlBarVisibility": "hover",
			"useH5Prism": true,
			requestFullScreen: function() {
				console.log(123123)
			},
			"skinLayout": [{
				"name": "bigPlayButton",
				"align": "blabs",
				"x": 30,
				"y": 80
			}, {
				"name": "controlBar",
				"align": "blabs",
				"x": 0,
				"y": 0,
				"children": [{
					"name": "liveDisplay",
					"align": "tlabs",
					"x": 15,
					"y": 6
				}, {
					"name": "fullScreenButton",
					"align": "tr",
					"x": 10,
					"y": 10
				}, {
					"name": "subtitle",
					"align": "tr",
					"x": 15,
					"y": 12
				}, {
					"name": "setting",
					"align": "tr",
					"x": 15,
					"y": 12
				}, {
					"name": "volume",
					"align": "tr",
					"x": 5,
					"y": 10
				}]
			}]
		}, function(player) {
			console.log(player.playing)
			console.log("The player is created");

		});
		document.addEventListener("fullscreenchange", function(e) {
			if (document.fullscreenElement) {
				// console.log('进入全屏') 
				plus.screen.lockOrientation('landscape');
			} else {
				plus.screen.lockOrientation("portrait-primary");
				// console.log('退出全屏') 
			}
		})
	</script>
</html>
